<template>
  <div class="cd-definition">
    <div class="cdd-title">
      <svg-icon icon-class="chart-pie-rounded" />
      <span>指标定义</span>
    </div>
    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>基本信息</span>
      </template>
      <el-descriptions-item label="指标名称">{{ chart.name || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标简称">{{ chart.abbreviationAlias || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标定义">{{ chart.indexDefine || '--' }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>业务标准</span>
      </template>
      <el-descriptions-item label="指标用途">{{ chart.indexFunction || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标来源">{{ chart.indexSource || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标分类">{{ chart.indexType || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标极限">{{ chart.indexLimit || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标标签">
        <el-tag v-for="(item, i) in labels" :key="i" size="small">{{ item }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>数据标准</span>
      </template>
      <el-descriptions-item label="计算公式">{{ chart.formula || '--' }}</el-descriptions-item>
      <el-descriptions-item label="单位">{{ chart.unit || '--' }}</el-descriptions-item>
      <el-descriptions-item label="频率">{{ chart.frequency || '--' }}</el-descriptions-item>
      <el-descriptions-item label="需求维度">{{ chart.dimension || '--' }}</el-descriptions-item>
      <el-descriptions-item label="数据精度">{{ chart.dataAccuracy || '--' }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: 'ChartDesignDefinition',
  data() {
    return {
      chart: {},
    }
  },
  computed: {
    labels() {
      return this.chart.indexLabel ? this.chart.indexLabel.split(',') : []
    },
  },
  watch: {
    '$route.query.id': function (val) {
      if (val) {
        this.init()
      }
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loadData(this.$route.query.id)
    },
    async loadData(chartId) {
      try {
        const { success, data } = await request({
          url: '/jtx/index/get',
          method: 'get',
          params: { id: chartId },
        })
        if (success) {
          this.chart = data
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.cd-definition {
  padding: 20px;

  .cdd-title {
    display: flex;
    align-items: center;
    .svg-icon {
      font-size: 28px;
      margin-right: 8px;
    }
    span {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }

  ::v-deep .el-descriptions {
    margin-top: 16px;
    .el-descriptions__header {
      margin-bottom: 12px;
      .el-descriptions__title {
        display: flex;
        align-items: center;
        .svg-icon {
          font-size: 20px;
          margin-right: 8px;
        }
      }
    }

    .el-descriptions__body {
      padding-left: 16px;

      .el-descriptions-item__content {
        display: block;
        .el-tag {
          margin-bottom: 8px;
          &:not(:last-child) {
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>
